{% extends 'base.html' %}
{% block title %}  - Manage Categories {% endblock %}

{% block content %}
<script>
	/* Show the respect tools, skills, and tags. */
	function show_array(c_id, _array, _cat,  _html_id){
		var temp = "/user/category/new/?type="+_cat+"&c_id="+c_id;
		var _html = "<form method='post' action='"+temp+"' >" +
			"<table width=\"270px\">" +
			"<tr><td><input type='text' name='new_name'></td>" +
			"<td align=\"center\" width=\"40\"><input type='submit' value='Add'></td></tr>" +
			"</table></form>";
		_html += "<table width='270px'>";
		for (var i=0;i<_array.length;i++){
			if (_array[2*i]){
				_html += "<tr><td>"+_array[2*i+1] + "</td><td align=\"center\" width=\"40\">";
				_html += "<a href='/user/category/delete/?"+ _cat+"=" + _array[2*i]+"&c_id=" + c_id + "' " ;
				_html += "onclick=\"return confirm('Delete this?');\"><img src=\"/site_media/img/trash.gif\" /></a></td></tr>";
			}
		}

		_html += "</table>";
		document.getElementById(_html_id).innerHTML = _html;
	}

	/* Show all the skills, tools and tags grouped by categories. */
	function show_skill_tool_tag(c_id,tools, skills, tags){
		show_array(c_id, tools, 'tool',  '_tools');
		show_array(c_id, skills, 'skill', '_skills');
		show_array(c_id, tags, 'tag	', '_tags');
	}
</script>
<div id="content" style="position:absolute; top:20px; left:0px; width:610px; background-color: #1A1A1A; layer-background-color: #1A1A1A;">
<table width="610">
<tr>
	<td><p><span style="font-size:14px;color:#CCC">Edit categories, tools and skills</span></p></td>
	<td><a href="/initcat/" onclick="return confirm('Do you want to reset the categories? All previous changes will be lost.');"><img src="/site_media/img/delete.gif"/> Reset to default</a>
</tr>
</table>


<div style="float:right;WIDTH:300px;HEIGHT:500;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
	<div style="position:relative;left:5px;top:5px;">
      <table width="270"> 
        <tr><th colspan="2">
        <b>Skills</b> 
        </th></tr>
		</table>
		<div id="_skills"></div>
	</div> <br/>

	<div style="position:relative;left:5px;top:5px;">
	     <table width="270"> 
        <tr><th colspan="2">
        <b>Tools</b> 
        </th></tr>
	  </table>
		<div id="_tools"></div>
	</div> <br/>

	<div style="position:relative;left:5px;top:5px;display:none">
		<b>Tags</b> <br/><br/>
		<div id="_tags"></div>
	</div>
</div>

<div style="float:left;left:2px;WIDTH:300px;HEIGHT:500px;word-wrap:break-word;OVERFLOW:auto;overflow-x:hidden;border:1px solid #7e7d68;top:40px;scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF;scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF;scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222;scrollbar-arrow-color: #222222">
	<div style="position:relative;left:5px;top:5px;">
	
        <table width="270px">
        <tr><td colspan="2">
        <b>Categories</b> 
        </td></tr>
		<form method="post" action="/user/category/new/?type=category">
			
				<tr>
					<td><input type="text" name="new_name"></td>
					<td align="center"><input type="submit" value="Add"></td>
				</tr>
			
		</form>

			{% for x in skts %}
			{% if x.category.id == ca.id %}
			<script>
				show_skill_tool_tag(
				{{x.category.id}},
				[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);
			</script>
			{% endif %}
			<tr>
				<td>
					<a href="#" onclick="show_skill_tool_tag(
						{{x.category.id}},
						[{% for y in x.tools %}'{{y.id}}','{{y.name}}',{% endfor %}],
						[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
						[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
						{{x.category.name}}
					</a>
				</td>
				<td align="center" width="40">
					<a href="/user/category/delete/?category={{x.category.id}}" title="Delete category" onclick="return confirm('Delete this category?');">
						<img src="/site_media/img/trash.gif"/>
					</a>
				</td>
			</tr>
			{% endfor %}
		</table>
	</div>
</div>
</div>
{% endblock %}